{% extends 'base_dashboard.html' %}

{% block title %}MCQ Bank — {{ program.title }}{% endblock %}

{% block content %}
<div class="d-flex justify-content-between mb-3 flex-wrap gap-2">
  <div>
    <h4 class="fw-bold mb-1">MCQ bank — {{ program.title }}</h4>
    <p class="text-muted small mb-0">
      <strong>{{ program.active_question_count }}</strong> active in bank
      (minimum <strong>{{ program.min_question_bank }}</strong> required) ·
      Each student gets a random <strong>{{ program.questions_per_exam }}</strong> MCQs
      {% if not program.is_exam_ready %}
        <span class="text-danger">· Need {{ program.question_bank_deficit }} more MCQs before exams can run</span>
      {% else %}
        <span class="text-success">· Bank ready</span>
      {% endif %}
    </p>
  </div>
  <a href="{% url 'certifications:admin_programs' %}" class="btn btn-outline-secondary btn-sm">Back</a>
</div>

{% if not program.is_exam_ready %}
<div class="alert alert-warning border-0 small">
  Enter at least {{ program.min_question_bank }} MCQs. The system will randomly select
  {{ program.questions_per_exam }} different questions for every candidate attempt.
</div>
{% endif %}

{# ── Bulk CSV upload ── #}
<div class="card border-0 shadow-sm rounded-4 mb-4">
  <div class="card-body p-4">
    <div class="d-flex justify-content-between align-items-start flex-wrap gap-2 mb-3">
      <div>
        <h6 class="fw-bold mb-1"><i class="bi bi-file-earmark-spreadsheet me-1"></i>Bulk upload MCQs (CSV)</h6>
        <p class="text-muted small mb-0">
          Download the sample file, fill in your questions and answers, then upload to import the whole bank at once.
        </p>
      </div>
      <a href="{% url 'certifications:admin_questions_sample_csv' program.pk %}"
         class="btn btn-outline-primary btn-sm">
        <i class="bi bi-download me-1"></i>Download sample CSV
      </a>
    </div>

    <div class="row g-3 align-items-end">
      <div class="col-lg-8">
        <form method="post"
              action="{% url 'certifications:admin_questions_bulk_upload' program.pk %}"
              enctype="multipart/form-data"
              class="row g-2 align-items-end">
          {% csrf_token %}
          <div class="col-md-8">
            <label class="form-label small fw-semibold">Select CSV file</label>
            {{ bulk_form.csv_file }}
            {% if bulk_form.csv_file.errors %}
              <div class="text-danger small mt-1">{{ bulk_form.csv_file.errors.0 }}</div>
            {% endif %}
          </div>
          <div class="col-md-4">
            <button type="submit" class="btn btn-success w-100">
              <i class="bi bi-upload me-1"></i>Upload &amp; import
            </button>
          </div>
        </form>
      </div>
      <div class="col-lg-4">
        <div class="small text-muted bg-light rounded-3 p-3 h-100">
          <strong>CSV columns:</strong>
          <code class="d-block mt-1" style="font-size:.72rem;word-break:break-all;">
            question, choice_a, choice_b, choice_c, choice_d, correct, order, is_active
          </code>
          <span class="d-block mt-2">
            <strong>correct</strong> = A / B / C / D (required).
            Choice C/D, order, and is_active are optional.
          </span>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="row g-4">
  <div class="col-lg-5">
    <div class="card border-0 shadow-sm rounded-4">
      <div class="card-body p-4">
        <h6 class="fw-bold mb-3">Add single question</h6>
        <form method="post">
          {% csrf_token %}
          <div class="mb-2"><label class="form-label small fw-semibold">Question</label>{{ form.text }}</div>
          <div class="mb-2"><label class="form-label small fw-semibold">Choice A</label>{{ form.choice_a }}</div>
          <div class="mb-2"><label class="form-label small fw-semibold">Choice B</label>{{ form.choice_b }}</div>
          <div class="mb-2"><label class="form-label small fw-semibold">Choice C</label>{{ form.choice_c }}</div>
          <div class="mb-2"><label class="form-label small fw-semibold">Choice D</label>{{ form.choice_d }}</div>
          <div class="mb-2"><label class="form-label small fw-semibold">Correct</label>{{ form.correct }}</div>
          <div class="mb-2"><label class="form-label small fw-semibold">Order</label>{{ form.order }}</div>
          <div class="form-check mb-3">{{ form.is_active }} <label class="form-check-label">Active</label></div>
          <button class="btn btn-primary w-100">Add question</button>
        </form>
      </div>
    </div>
  </div>
  <div class="col-lg-7">
    <div class="small text-muted mb-2">Showing latest {{ questions|length }} questions (newest first for large banks).</div>
    {% for q in questions %}
    <div class="card border-0 shadow-sm rounded-4 mb-2">
      <div class="card-body p-3">
        <div class="d-flex justify-content-between gap-2">
          <div>
            <div class="fw-semibold small">#{{ q.order|default:q.pk }} · {{ q.text }}</div>
            <ul class="small mb-0 text-muted">
              {% for c in q.choices.all %}
                <li>{% if c.is_correct %}<strong class="text-success">✓ {% endif %}{{ c.text }}{% if c.is_correct %}</strong>{% endif %}</li>
              {% endfor %}
            </ul>
          </div>
          <form method="post" action="{% url 'certifications:admin_question_delete' q.pk %}" onsubmit="return confirm('Delete question?');">
            {% csrf_token %}
            <button class="btn btn-sm btn-outline-danger"><i class="bi bi-trash"></i></button>
          </form>
        </div>
      </div>
    </div>
    {% empty %}
    <div class="text-muted">No questions yet. Upload a CSV or add MCQs on the left.</div>
    {% endfor %}
  </div>
</div>
{% endblock %}